<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
// import { useIcon } from '@/hooks/web/useIcon'
import { reactive, watch } from 'vue'
import { empSelect, placeendSelect, submarketSelect } from '@/api/common'

import { ElForm, ElFormItem, ElInput, ElRow, ElCol, ElSelect, ElOption } from 'element-plus'

const { t } = useI18n()

// const addIcon = useIcon({ icon: 'gala:add' })
// const delIcon = useIcon({ icon: 'material-symbols:delete-outline' })

const props = defineProps({
  currentRow: {
    type: Object as any,
    default: () => null
  }
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    form.code = currentRow.code
    form.fahuo = currentRow.fahuo
    form.shouhuo = currentRow.shouhuo
    form.shmobile = currentRow.shmobile
    form.passport = currentRow.passport
    form.email = currentRow.email
    form.salesman = currentRow.salesman
    form.status = currentRow.status
    form.assess = currentRow.assess
    form.submarket = currentRow.submarket
    form.simplifiedCode = currentRow.simplifiedCode
    form.looktime = currentRow.looktime
    form.restrict = currentRow.restrict
    form.username = currentRow.username
    form.password = currentRow.password
  }
)

// 表单对应的字段（绑定到输入框以及选择框俄字段）
const form: any = reactive({
  code: '',
  fahuo: '',
  shouhuo: '',
  shmobile: '',
  passport: '',
  email: '',
  salesman: '',
  status: '',
  assess: '',
  submarket: '',
  simplifiedCode: '',
  looktime: '',
  restrict: '',
  username: '',
  password: '',
  densityList: []
})
// 下拉选择
const censusArr: any = reactive([
  {
    label: '否',
    value: 0
  },
  {
    label: '是',
    value: 1
  }
])
//业务员员工名称
const employeeInfoArr: any = reactive([])
const getempSelect = async () => {
  let res: any = await empSelect()
  res.data.list.forEach((item) => {
    employeeInfoArr.push({
      label: item.name,
      value: item.id
    })
  })
}
getempSelect()

//目的地
const destinationArr: any = reactive([])
const getplaceendSelect = async () => {
  let res: any = await placeendSelect()
  res.data.list.forEach((item) => {
    destinationArr.push({
      label: item.name,
      value: item.id
    })
  })
}
getplaceendSelect()

//分货市场
const submarketArr: any = reactive([])
const getsubmarketSelect = async () => {
  let res: any = await submarketSelect()
  res.data.list.forEach((item) => {
    submarketArr.push({
      label: item.name,
      value: item.id
    })
  })
}
getsubmarketSelect()

const setDensityNum = () => {
  console.log('---设置区间数量---')
  if (form.density) {
    let densityItem = {
      name: '',
      min: '',
      max: ''
    }
    for (let i = 0; i < form.density; i++) {
      form.densityList.push(densityItem)
    }
  } else {
    form.densityList = []
  }
}

defineExpose({
  getFormData: () => {
    return form
  }
})
</script>

<template>
  <ElForm :model="form" label-width="auto">
    <ElRow>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('warehousingEntry.customerNo')">
          <ElInput v-model="form.code" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('customerManagement.shipper')">
          <ElInput v-model="form.fahuo" />
        </ElFormItem>
      </ElCol>
      <!-- <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('customerManagement.consignee')">
          <ElInput v-model="form.shouhuo" />
        </ElFormItem>
      </ElCol> -->
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('customerManagement.consigneePhone')">
          <ElInput v-model="form.shmobile" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('customerManagement.passportNo')">
          <ElInput v-model="form.passport" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('descriptionsDemo.email')">
          <ElInput v-model="form.email" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('customerManagement.accountingPeriodDays')">
          <ElInput v-model="form.endplace_min" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('customerManagement.salespersonName')">
          <!-- <ElInput v-model="form.salesman" /> -->
          <ElSelect clearable v-model="form.salesman" placeholder="请选择业务员名称" filterable>
            <ElOption
              v-for="item in employeeInfoArr"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('customerManagement.receivingStatus')">
          <ElInput v-model="form.status" @input="setDensityNum" />
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElRow>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('customerManagement.comprehensiveEvaluation')">
          <ElInput v-model="form.assess" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('descriptionsDemo.username')">
          <ElInput v-model="form.username" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('customerManagement.loginPassword')">
          <ElInput v-model="form.password" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('customerManagement.viewRecordTime')">
          <ElInput v-model="form.looktime" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="8">
        <ElFormItem label-width="150px" :label="t('customerManagement.canILoginIn')">
          <!-- <ElInput v-model="form.restrict" /> -->
          <ElSelect v-model="form.restrict" :placeholder="t('common.inputText')" filterable>
            <ElOption
              v-for="item in censusArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
    </ElRow>
  </ElForm>
</template>
<style scoped lang="less">
.listForItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .el-col:nth-of-type(2) {
    font-size: var(--el-form-label-font-size);
    padding: 0 15px;
  }
  .el-col:nth-of-type(1) {
    padding-right: 15px;
  }
  .el-col:nth-of-type(6) {
    padding-left: 15px;
  }
  .el-divider--horizontal {
    margin: 0;
  }
  .el-form-item--default {
    margin-bottom: 0;
  }
}
</style>
